<template>
    <div class="messagelist">
        <div class="content">
            <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                <div  v-for="item in list" :key="item.index">
                    <div class="list-box">
                        <img class="notifyIcon" src="http://img.xuannang.net/xitongtongzhi@2x.png" alt="">
                        <div class="box-right">
                            <div class="list-title">{{item.title}}</div>
                            <div class="list-time">{{item.create_time}}</div>
                            <!-- 当前用户反馈的内容 -->
                            <div class="list-feed" v-if="item.title == '意见反馈官方回复'">
                                反馈内容：{{item.suggestion_content}}
                            </div>
                            <div class="list-info" >
                                <span v-if="item.title == '意见反馈官方回复'">回复内容：</span>
                                <span v-else>通知内容：</span>
                                {{item.content}}
                            </div>
                            <!-- 图片 -->
                            <div v-if="item.img.length>0" class="img-out-box">
                                <div v-for="(img,index) in item.img" :key="index" class="img-box" @click="showBigImg(item.img,index)">
                                    <img class="img" :src="img" alt="">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </van-list>
        </div>
        <!-- 没有更多了 -->
        <div v-if="finished" class="notMore">——&nbsp;没有更多了&nbsp;——</div>
    </div>
</template>

<script>
import { Toast,List,Dialog ,ImagePreview  } from 'vant';
import {getNotifyList} from '@/api/me'
export default {
    name:'notifyList',
    //声明组件
    components:{
        [List.name]:List,
        [Toast.name]:Toast,
        [Dialog.name]:Dialog,
        [ImagePreview.name]:ImagePreview,
    },
    data(){
        return {
            token:'',//token
            loading:false,//列表加载中
            finished:false,//列表是否加载完成
            list:[],//消息列表
            pageIndex:1,
            pageSize:10,
            total:0,//总条数
        }
    },
    created(){
        //获得参数token
        if(this.$route.query.token){
            this.token = this.$route.query.token;
            this.getNotifyList();//获取留言列表
        }  
        console.log(this.token) 
        
    },
    methods:{
        //获取列表
        getNotifyList(){
            //加载状态
            this.loading = true;
            getNotifyList(this.token ,this.pageIndex,this.pageSize).then(res => {
                if(res.code == 200){
                    if(this.pageIndex == 1){
                        this.list = res.data.list;
                    }else {
                        let lists = this.list;
                        this.list = lists.concat(res.data.list);
                    }
                    this.total = res.data.total;
                    console.log(this.list)
                    //加载状态
                    this.finished = false;
                    this.loading = false;
                }else if(res.code == 403){
                    Dialog.alert({
                        title: '提示',
                        message: '您的账号被挤下线，请重新登录',
                        confirmButtonText:'去登陆'
                    }).then(() => {
                        //跳转原生登录
                        let para = {};
                        para.linkType = "login";
                        this.interaction.hLinkToApp(para);
                    });
                    this.loading = false;
                }
            })
        },
        // 上滑懒加载
        onLoad(){
            setTimeout(()=>{
                this.pageIndex++;
                if(this.list.length != this.total){
                    this.getNotifyList();//加载更多
                    
                }else {
                    //加载状态
                    this.finished = true;
                    this.loading = false;
                }
            },500);
        },
        // 查看大图
        showBigImg(ary,idx){
          
            let imgAry = ary;
            let index = idx;
            console.log(imgAry,index);
            // ImagePreview({
            //     images:imgAry,
            //     startPosition: index,
            //     onClose() {
            //         // do something
            //     }
            // });
            ImagePreview(imgAry,index)    
        },
    }
    
}

</script>

<style lang="stylus" scoped>
 .messagelist{
    width :100%;
    height :100%;
    box-sizing :border-box;
    overflow-x :hidden;
    .content{
         width:100%;
        .list-box {
            padding:.266667rem;
            padding-bottom :.266667rem;
            border-bottom:.026667rem solid #f1f1f1;
            display:inline-block;
            box-sizing: border-box;
            width: 100%;
            display :flex;
            .notifyIcon {
                width:.8rem;
                height:.8rem;
                float:left;
                margin-right  :.32rem;
            }
            .box-right {
                float:left;
                flex:1;
                // margin-left :.32rem;
              
                overflow:hidden;
                .list-title {
                    line-height :.533333rem;
                    font-size:.32rem;
                    color:#494949;
                    margin-bottom :.133333rem;
                }
                .list-time {
                    font-size:.266667rem;
                    color:#a2a2a2;
                    margin-bottom :.266667rem;
                }
                .list-feed{
                    width:8rem;
                    font-size:.346667rem;
                    color:#494949;
                    line-height :.533333rem;
                    text-align :justify;
                    padding :0.106667rem 0.266667rem 0.106667rem 0; 
                    border-bottom :1px solid #f1f1f1;
                    margin-bottom :.106667rem;
                }
                .list-info {
                    width:8rem;
                    font-size:.346667rem;
                    color:#494949;
                    line-height :.533333rem;
                    text-align :justify;
                    padding-right :0.266667rem;
                     margin-bottom :.106667rem;
                }
                .img-out-box{
                    overflow :hidden;
                    box-sizing :border-box;
                    flex-wrap:wrap;
                    display:flex;
                    // justify-content :space-between;
                    width :100%;
                    .img-box{
                        float :left;
                        margin-right:0.5%;
                        margin-bottom :.133333rem;
                        width :33%;
                        &:nth-child(3n){
                            margin-right :0;
                        }
                        .img{
                            width :100%;
                            height :100px;
                        }
                    }
                }
            }
        }
    }
    .notMore {
        width: 10rem;
        height: 1.066667rem;
        line-height: 1.066667rem;
        font-size: .373333rem;
        color: #A2A2A2;
        text-align: center;  
    }
}    

</style>